<template>
  <div>
    <h4>发表评论</h4>
    <textarea name id cols="30" rows="5" placeholder="请输入内容" v-model="msg" maxlength="100"></textarea>
    <mt-button type="primary" size="large" @click="postMsg">发表评论</mt-button>

    <div class="cmt-list">
      <div class="cmt-item" v-for="(item,i) in cmtlist" :key="i">
        <div class="cmt-item-title">
          <span>第{{i+1}}楼用户:{{item.user_name}}</span>
          <span class="cmt-fabiaoshijian">发表时间:{{item.add_time | dataFormat}}</span>
        </div>
        <div class="cmt-item-body">{{item.content}}</div>
      </div>
    </div>

    <mt-button type="danger" size="large" plain @click="addMore">加载更多</mt-button>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      page: 1,
      cmtlist: [],
      msg: ""
    };
  },
  created() {
    this.getCommentByPage();
  },
  methods: {
    async getCommentByPage() {
      const { data } = await this.$http.get(
        "/api/getcomments/" + this.id + "?pageindex=" + this.page
      );
      //console.log(data);
      if (data.status === 0)
        //console.log("ok")
        //console.log(data.message)
        return (this.cmtlist = this.cmtlist.concat(data.message));
      //console.log(this.cmtlist)
    },
    addMore() {
      this.page++;
      this.getCommentByPage();
    },
    async postMsg() {
      //console.log("hahaha");
      if (this.msg.trim().length <= 0) return Toast("请输入评论内容！");
      const { data } = await this.$http.post("api/postcomment/" + this.id, {
        content: this.msg.trim()
      });
      if(data.status===0){
        Toast("发表成功！")
        this.cmtlist.unshift({user_name:"123",add_time:new Date(),content:this.msg.trim()})
        this.msg=''
      }
    }
  },
  props: ["id"]
};
</script>

<style lang="scss" scoped>
textarea {
  font-size: 14px;
  margin: 0;
}
.cmt-list {
  margin-top: 5px;
  .cmt-item {
    line-height: 30px;
    .cmt-item-title {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      background-color: rgb(204, 207, 226);
      border-radius: 3px;
      .cmt-fabiaoshijian {
        color: rgb(219, 38, 195);
        font-size: 10px;
      }
    }
    .cmt-item-body {
      font-size: 16px;
      text-indent: 1em;
    }
  }
}
</style>